<template>
  <div class="header">
    <div class='logo'>
      <img src="../../../public/logo.a551199.png" style="height:40px" alt="">
      <p>泛能OS - {{ename}}</p>
    </div>
    <div class='admin hidden-xs-only'>
      <span @click="screenfull_click">
        <el-tooltip effect="dark" content='全屏' placement="top">
          <i class='el-icon-rank'></i>
        </el-tooltip>
      </span>
      <span @click="openview('/index')" class='index'>
        <el-tooltip effect="dark" content='首页' placement="top">
          <i class='iconfont icon-shouye' style="font-size:14px"></i>
        </el-tooltip>
      </span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link" style="color:#ffffff">
          <span>{{rname}}</span><i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="padding:0;">
          <el-dropdown-item command='out'> <i class='iconfont icon-tuichu' style="margin-right:10px"></i> 退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <i class='xs-menu hidden-sm-and-up el-icon-menu' @click='xs_menu_show'></i>
    </div>

  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'heade',
  props: {
    msg: String
  },
  data() {
    return {
      ename: '',
      rname: '',
      xs_is_show: false,
      isFullscreen: false
    }
  },
  mounted() {
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 全屏下按键esc后要执行的动作
        this.isFullscreen = false;
      }
    }
  },
  methods: {
    handleCommand(a) {
      if (a === 'out') {
        this.SignOut()
      }
    },
    SignOut() {
       let fd = new FormData()
      fd.append('ticket',  sessionStorage.getItem('ticket'))
      this.$axios.post(this.login + '/uac.logout',fd).then(res => {
        // // 清除本地session
        // sessionStorage.clear();
        // 跳转泛能网首页
        window.location.href = this.logout+'?ticket=' + sessionStorage.getItem('ticket');
      }).catch(err => {
        console.log(err)
      })
    },
    screenfull_click() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'Your browser does not support!',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    // screenfull_click() {
    //   if (screenfull.enabled) {
    //     screenfull.toggle();
    //   }
    // },
    xs_menu_show() {
      this.xs_is_show = !this.xs_is_show
      this.$emit('xs_menu_show', this.xs_is_show)
    },
    openview(path) {
      this.$router.push({ path: path })
    }
  },

  created() {
    this.ename = sessionStorage.getItem('entName')
    this.rname = sessionStorage.getItem('realname')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 20px;
  .logo {
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    p {
      font-size: 14px;
      border-left: 1px solid #ffffff;
      display: inline-block;
      margin-left: 10px;
      padding-left: 10px;
      height: 14px;
    }
  }
  .admin {
    padding: 0 26px 0 0;
    display: flex;
    align-items: center;
    span {
      font-size: 16px;
      margin-left: 10px;
    }
    .index {
      border-right: 1px solid #ffffff;
      margin-right: 10px;
      padding-right: 10px;
      display: inline-block;
    }
  }
}
</style>
